<template>
    <div style="display: flex;width: 100%;height: 100vh; ">

        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 130px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 信息框的模式 -->
                    <div :style='样式1'>
                        <h4>信息框的模式 确定 |确定取消 | 代输入框 : </h4>
                        <spen :style='样式2'>英:类型,类型:类型,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.类型' size='small'
                            @change="提交改变">
                            <el-radio label="alert">确定 </el-radio>
                            <el-radio label="confirm">确定取消 </el-radio>
                            <el-radio label="prompt">代输入框 </el-radio>
                        </el-radio-group></div>
                    <!-- 打开 MessageBox 时是否自动获得焦点 -->
                    <div :style='样式1'>
                        <h4>打开 MessageBox 时是否自动获得焦点 : </h4>
                        <spen :style='样式2'>英:autofocus,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.autofocus' size='small'
                            @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- MessageBox 的标题 -->
                    <div :style='样式1'>
                        <h4>MessageBox 的标题 : </h4>
                        <spen :style='样式2'>英:title,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.title' size='small'
                            @change="提交改变">
                            <el-radio label="我是标题">有例子 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- MessageBox 的正文内容 -->
                    <div :style='样式1'>
                        <h4>MessageBox 的正文内容 : </h4>
                        <spen :style='样式2'>英:message,类型:string / VNode / Function 2.2.17,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.message' size='small'
                            @change="提交改变">
                            <el-radio label="我是正文">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否将 message 作为 HTML 片段处理 -->
                    <div :style='样式1'>
                        <h4>是否将 message 作为 HTML 片段处理 : </h4>
                        <spen :style='样式2'>英:dangerouslyUseHTMLString,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.dangerouslyUseHTMLString'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 消息类型，用于图标显示 -->
                    <div :style='样式1'>
                        <h4>消息类型，用于图标显示 : </h4>
                        <spen :style='样式2'>英:type,类型:enum,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.type' size='small'
                            @change="提交改变">
                            <el-radio label="success">成功</el-radio>
                            <el-radio label="info">信息 </el-radio>
                            <el-radio label="warning">危险 </el-radio>
                            <el-radio label="error">错误</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 自定义图标组件，会覆盖 type 的类型 -->
                    <div :style='样式1'>
                        <h4>自定义图标组件，会覆盖 type 的类型 : </h4>
                        <spen :style='样式2'>英:icon,类型:string / Component,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;margin-top: 10px;'><el-radio-group v-model='属性.icon'
                            size='small' @change="提交改变">
                            <el-radio :label="Edit"><el-button size="small" :icon="Edit">编辑</el-button></el-radio>
                            <el-radio :label="Share"><el-button size="small" :icon="Share">共享</el-button></el-radio>
                            <el-radio :label="Search"><el-button size="small" :icon="Search">搜索</el-button></el-radio>
                            <el-radio :label="Delete"><el-button size="small" :icon="Delete">删除</el-button></el-radio>
                            <el-radio :label="Upload"><el-button size="small" :icon="Upload">下载</el-button></el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group></div>
                    <!-- MessageBox 的自定义类名 -->
                    <div :style='样式1'>
                        <h4>MessageBox 的自定义类名 : </h4>
                        <spen :style='样式2'>英:customClass,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.customClass' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- MessageBox 的自定义内联样式 -->
                    <div :style='样式1'>
                        <h4>MessageBox 的自定义内联样式 : </h4>
                        <spen :style='样式2'>英:customStyle,类型:CSSProperties,默认:{}</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.customStyle' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- MessageBox 是否显示右上角关闭按钮 -->
                    <div :style='样式1'>
                        <h4>MessageBox 是否显示右上角关闭按钮 : </h4>
                        <spen :style='样式2'>英:showClose,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.showClose' size='small'
                            @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 Esc 键）进行区分 -->
                    <div :style='样式1'>
                        <h4>是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 Esc 键）进行区分 : </h4>
                        <spen :style='样式2'>英:distinguishCancelAndClose,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'>
                        <el-radio-group v-model='属性.distinguishCancelAndClose' size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 是否在 MessageBox 出现时将 body 滚动锁定 -->
                    <div :style='样式1'>
                        <h4>是否在 MessageBox 出现时将 body 滚动锁定 : </h4>
                        <spen :style='样式2'>英:lockScroll,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.lockScroll' size='small'
                            @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示取消按钮 -->
                    <div :style='样式1'>
                        <h4>是否显示取消按钮 : </h4>
                        <spen :style='样式2'>英:showCancelButton,类型:boolean,默认:false（以 confirm 和 prompt 方式调用时为 true）</spen>
                        <br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.showCancelButton'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示确定按钮 -->
                    <div :style='样式1'>
                        <h4>是否显示确定按钮 : </h4>
                        <spen :style='样式2'>英:showConfirmButton,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.showConfirmButton'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 取消按钮的文本内容 -->
                    <div :style='样式1'>
                        <h4>取消按钮的文本内容 : </h4>
                        <spen :style='样式2'>英:cancelButtonText,类型:string,默认:取消</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.cancelButtonText'
                            size='small' @change="提交改变">
                            <el-radio label="取消按钮的文本内容">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 确定按钮的文本内容 -->
                    <div :style='样式1'>
                        <h4>确定按钮的文本内容 : </h4>
                        <spen :style='样式2'>英:confirmButtonText,类型:string,默认:确定</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.confirmButtonText'
                            size='small' @change="提交改变">
                            <el-radio label="确定按钮的文本内容">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 取消按钮的自定义类名 -->
                    <div :style='样式1'>
                        <h4>取消按钮的自定义类名 : </h4>
                        <spen :style='样式2'>英:cancelButtonClass,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.cancelButtonClass'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 确定按钮的自定义类名 -->
                    <div :style='样式1'>
                        <h4>确定按钮的自定义类名 : </h4>
                        <spen :style='样式2'>英:confirmButtonClass,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.confirmButtonClass'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 是否可通过点击遮罩层关闭 MessageBox -->
                    <div :style='样式1'>
                        <h4>是否可通过点击遮罩层关闭 MessageBox : </h4>
                        <spen :style='样式2'>英:closeOnClickModal,类型:boolean,默认:true（以 alert 方式调用时为 false）</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.closeOnClickModal'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否可通过按下 ESC 键关闭 MessageBox -->
                    <div :style='样式1'>
                        <h4>是否可通过按下 ESC 键关闭 MessageBox : </h4>
                        <spen :style='样式2'>英:closeOnPressEscape,类型:boolean,默认:true（以 alert 方式调用时为 false）</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.closeOnPressEscape'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否在 hash 改变时关闭 MessageBox -->
                    <div :style='样式1'>
                        <h4>是否在 hash 改变时关闭 MessageBox : </h4>
                        <spen :style='样式2'>英:closeOnHashChange,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.closeOnHashChange'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示输入框 -->
                    <div :style='样式1'>
                        <h4>是否显示输入框 : </h4>
                        <spen :style='样式2'>英:showInput,类型:boolean,默认:false（以 prompt 方式调用时为 true）</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.showInput' size='small'
                            @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入框占位文本 -->
                    <div :style='样式1'>
                        <h4>输入框占位文本 : </h4>
                        <spen :style='样式2'>英:inputPlaceholder,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.inputPlaceholder'
                            size='small' @change="提交改变">
                            <el-radio label="输入框占位文本">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入框的类型 -->
                    <div :style='样式1'>
                        <h4>输入框的类型 : </h4>
                        <spen :style='样式2'>英:inputType,类型:string,默认:text</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.inputType' size='small'
                            @change="提交改变">
                            <el-radio label="text">文本 </el-radio>
                            <el-radio label="textarea">多行文本 </el-radio>
                            <el-radio label="password">密码</el-radio>
                            <el-radio label="number">数字 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入框的初始文本 -->
                    <div :style='样式1'>
                        <h4>输入框的初始文本 : </h4>
                        <spen :style='样式2'>英:inputValue,类型:string,默认:null</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.inputValue' size='small'
                            @change="提交改变">
                            <el-radio label="输入框的初始文本">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入框的校验表达式 -->
                    <div :style='样式1'>
                        <h4>输入框的校验表达式 : </h4>
                        <spen :style='样式2'>英:inputPattern,类型:regexp,默认:null</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.inputPattern' size='small'
                            @change="提交改变">
                            <el-radio label="/[0-9]/">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入框的校验函数。 应该返回一个 boolean 或者 string， 如果返回的是一个 string 类型，那么该返回值会被赋值给 inputErrorMessage 用于向用户展示错误消息。 -->
                    <div :style='样式1'>
                        <h4>输入框的校验函数。 应该返回一个 boolean 或者 string， 如果返回的是一个 string 类型，那么该返回值会被赋值给 inputErrorMessage
                            用于向用户展示错误消息。 : </h4>
                        <spen :style='样式2'>英:inputValidator,类型:Function,默认:null</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.inputValidator'
                            size='small' @change="提交改变">
                            size='small' @change="提交改变">
                        </el-radio-group></div>
                    <!-- 校验未通过时的提示文本 -->
                    <div :style='样式1'>
                        <h4>校验未通过时的提示文本 : </h4>
                        <spen :style='样式2'>英:inputErrorMessage,类型:string,默认:输入的数据不合法!</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.inputErrorMessage'
                            size='small' @change="提交改变">
                            <el-radio label="错误了">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否居中布局 -->
                    <div :style='样式1'>
                        <h4>是否居中布局 : </h4>
                        <spen :style='样式2'>英:center,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.center' size='small'
                            @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- MessageBox 是否可拖放 -->
                    <div :style='样式1'>
                        <h4>MessageBox 是否可拖放 : </h4>
                        <spen :style='样式2'>英:draggable,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.draggable' size='small'
                            @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否使用圆角按钮 -->
                    <div :style='样式1'>
                        <h4>是否使用圆角按钮 : </h4>
                        <spen :style='样式2'>英:roundButton,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.roundButton' size='small'
                            @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 自定义确认按钮及取消按钮的大小 -->
                    <div :style='样式1'>
                        <h4>自定义确认按钮及取消按钮的大小 : </h4>
                        <spen :style='样式2'>英:buttonSize,类型:string,默认:default</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.buttonSize' size='small'
                            @change="提交改变">
                            <el-radio label=large>大 large</el-radio>
                            <el-radio label="default">中 default</el-radio>
                            <el-radio label="small">小 small</el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group></div>
                    <!-- 设置组件的根元素 -->
                    <div :style='样式1'>
                        <h4>设置组件的根元素 : </h4>
                        <spen :style='样式2'>英:appendTo,类型:string / HTMLElement,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.appendTo' size='small'
                            @change="提交改变">
                        </el-radio-group></div>
                        <h2 style="margin-top: 15px;background-color:rgb(63, 45, 45);color: aliceblue;">-------触发的事件 -----</h2>
                    <!-- 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 -->
                    <div :style='样式1'>
                        <h4>若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 : </h4>
                        <spen :style='样式2'>英:callback,类型:Function,默认:null</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.callback' size='small'
                            @change="提交改变">
                            <el-radio label="关闭后的回调">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- messageBox 关闭前的回调，会暂停消息弹出框的关闭过程。 -->
                    <div :style='样式1'>
                        <h4>messageBox 关闭前的回调，会暂停消息弹出框的关闭过程。 : </h4>
                        <spen :style='样式2'>英:beforeClose,类型:Function,默认:null</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.beforeClose' size='small'
                            @change="提交改变">
                            <el-radio label="关闭前的回调">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                </el-scrollbar>

            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-button :round=true size='small' type='primary' @click="消息弹框" style="margin-top: 20px;">消息弹框</el-button>
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 50 }" type="textarea" placeholder="代码展示"
                style="width: 98%;margin-top: 50px;" />
        </div>
    </div>
</template>
<script setup>

import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive, markRaw } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 = proxy.router

const 消息弹框 = () => {
    if (属性.value.类型 == 'alert') {
        ElMessageBox.alert('', '',
            属性.value
        ).then((value) => {
            console.log("确定", value)
        })
            .catch(() => {
                console.log("取消")
            })

    } else if (属性.value.类型 == 'confirm') {

        ElMessageBox.confirm('', '',
            属性.value
        ).then((value) => {
            console.log("确定", value)
        })
            .catch(() => {
                console.log("取消")
            })


    } else if (属性.value.类型 == 'prompt') {

        ElMessageBox.prompt('', '',
            属性.value
        ).then((value) => {
            console.log("确定", value)
        })
            .catch(() => {
                console.log("取消")
            })
    }
}

const 代码 = ref('')
const 提交改变 = async () => {
    let 结果 = await 提交方法("组件修改", 组件名.value, 属性.value, 事件.value)
    代码.value = 结果
}

const 组件名 = ref('消息弹框')
const 属性 = ref({
    类型: 'alert',
    // autofocus: null,//打开 MessageBox 时是否自动获得焦点
    // title: null,//MessageBox 的标题
    // message: null,//MessageBox 的正文内容
    // dangerouslyUseHTMLString: null,//是否将 message 作为 HTML 片段处理
    // type: null,//消息类型，用于图标显示
    //"icon": Edit,//自定义图标组件，会覆盖 type 的类型
    // customClass: null,//MessageBox 的自定义类名
    // customStyle: null,//MessageBox 的自定义内联样式
    // showClose: null,//MessageBox 是否显示右上角关闭按钮
    // distinguishCancelAndClose: null,//是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 Esc 键）进行区分
    // lockScroll: null,//是否在 MessageBox 出现时将 body 滚动锁定
    // showCancelButton: null,//是否显示取消按钮
    // showConfirmButton: null,//是否显示确定按钮
    // cancelButtonText: null,//取消按钮的文本内容
    // confirmButtonText: null,//确定按钮的文本内容
    // cancelButtonClass: null,//取消按钮的自定义类名
    // confirmButtonClass: null,//确定按钮的自定义类名
    // closeOnClickModal: null,//是否可通过点击遮罩层关闭 MessageBox
    // closeOnPressEscape: null,//是否可通过按下 ESC 键关闭 MessageBox
    // closeOnHashChange: null,//是否在 hash 改变时关闭 MessageBox
    // showInput: null,//是否显示输入框
    // inputPlaceholder: null,//输入框占位文本
    // inputType: null,//输入框的类型
    // inputValue: null,//输入框的初始文本
    // inputPattern: null,//输入框的校验表达式
    // inputValidator: null,//输入框的校验函数。 应该返回一个 boolean 或者 string， 如果返回的是一个 string 类型，那么该返回值会被赋值给 inputErrorMessage 用于向用户展示错误消息。
    // inputErrorMessage: null,//校验未通过时的提示文本
    // center: null,//是否居中布局
    // draggable: null,//MessageBox 是否可拖放
    // roundButton: null,//是否使用圆角按钮
    // buttonSize: null,//自定义确认按钮及取消按钮的大小
    // appendTo: null,//设置组件的根元素

})

const 事件 = ref({
    // beforeClose: null,//messageBox 关闭前的回调，会暂停消息弹出框的关闭过程。
    // callback: null,//若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调
})



const 重置组件 = () => {
    let 原生属性 = {
        类型: 'alert',
    }
    属性.value = 原生属性
    事件.value = {}
    提交改变()
}


const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')


</script>
<style  scoped></style>
